﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Cadastro Padrão</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.custom.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
     
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>    
    
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
   <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/localization.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../scripts/SISAlerta.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
			//============================= Layout da tela =======================
			// Configura a tela para deixar em 2 frames
            $("#layoutTela").jqxSplitter({ 
				width: '100%', 
				height: (window.innerHeight - 20), 
				theme: "custom", 
				panels: [{ size: window.innerWidth - 400, theme: "custom",collapsible: false}, 
						 {min: 250, theme: "custom", collapsible : true}] 
			});
			$('#layoutTela').jqxSplitter('collapse');
			
			//============================= Grid =======================
			// Aqui prepara para buscar os dados via ajax
			var source = {
				datatype: "json",
				datafields: [{ name: 'id_usuario', type: 'int'},
							 { name: 'usu_usuario', type: 'string' },
							 { name: 'usu_email', type: 'string' },
							 { name: 'usu_acessoexterno', type: 'bool'}],
				pagesize: 50,
				cache: false,
				url: '/projeto/php/seguranca/SEGUsuario.php?pagenum=0&pagesize=20',
				filter: function(){
					// update the grid and send a request to the server.
					$("#gridPrincipal").jqxGrid('updatebounddata', 'filter');
				},
				sort: function(){
					// update the grid and send a request to the server.
					$("#gridPrincipal").jqxGrid('updatebounddata', 'sort');
				},
				root: 'Rows',
				beforeprocessing: function(data){		
					if (data != null){
						source.totalrecords = data[0].TotalRows;					
					}
				}
			};
			// Aqui executa o source para buscar os dados
			var dataadapter = new $.jqx.dataAdapter(source, {
				loadError: function(xhr, status, error) {
					alert(error);
				}
			});
	
			// Monta a grid padrão
			$("#gridPrincipal").jqxGrid({		
				source: dataadapter,
				width: '100%',
				height: '100%',
				theme: "custom",
				filterable: true,
				sortable: true,
				localization: getLocalization('pt-br'),
				pageable: true,
				virtualmode: true,
				showstatusbar: true,
				rendergridrows: function(obj) {
					return obj.data;    
				},
				renderstatusbar: function (statusbar) {
					// Botoes da barra de status da Grid
					var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
					var addButton = $("<div style='float: left; margin-left: 5px;'>" +
									  "<img style='position: relative; margin-top: 2px;' src='/projeto/images/add.png'/>" +
									  "<span style='margin-left: 4px; position: relative; top: -3px;'>Incluir</span></div>");
					var deleteButton = $("<div style='float: left; margin-left: 5px;'>" + 
										 "<img style='position: relative; margin-top: 2px;' src='/projeto/images/close.png'/>" + 
										 "<span style='margin-left: 4px; position: relative; top: -3px;'>Excluir</span></div>");
					var reloadButton = $("<div style='float: left; margin-left: 5px;'>" +
										 "<img style='position: relative; margin-top: 2px;' src='/projeto/images/refresh.png'/>" +
										 "<span style='margin-left: 4px; position: relative; top: -3px;'>Atualizar</span></div>");                    
					container.append(addButton);
					container.append(deleteButton);
					container.append(reloadButton);
					statusbar.append(container);
					addButton.jqxButton({  
						width: 100, 
						height: 20, 
						theme: "custom" 
					});
					deleteButton.jqxButton({  
						width: 100, 
						height: 20, 
						theme: "custom" 
					});
					reloadButton.jqxButton({  
						width: 100, 
						height: 20, 
						theme: "custom" 
					});
					//evento de clique do botão AddButton
					addButton.click(function (event) {
						$('#layoutTela').jqxSplitter('expand');
						$("#usu_email").focus();                        
					});
					//evento de clique do botão deleteButton
					deleteButton.click(function (event) {
						showmessage('#msgWindow','Confirmação','Confirma exclusão?','CONFIRMAR','');
						// evendo de confirmação positiva
						$('#ok').click(function() { 
							alert('SIM')
						});
					});
					//evento de clique do botão reloadButton
					reloadButton.click(function (event) {
						$("#gridPrincipal").jqxGrid('updatebounddata');
					});                    
				},
				columns: [{ text: '<div align="center">Código</div>', 
				            cellsalign: 'center', 
							datafield: 'id_usuario', 
							width: '10%' },
						  { text: 'Usuário', 
						    datafield: 'usu_usuario', 
							width: '30%' },
						  { text: 'E-mail', 
						    datafield: 'usu_email'},
						  { text: '<div align="center">Acesso Externo</div>', 
						    cellsalign: 'center', 
							datafield: 'usu_acessoexterno', 
							columntype: 'checkbox', 
							width: '30%',
							sortable :false, 
							filterable : false, 
							hideable : true }
				]
			});
			
			// Evendo de seleção de linha da grid para colocar os dados no form
			$('#gridPrincipal').on('rowselect', function (event) {
                // event arguments.
                /*var args = event.args;
                // selected row.
                var row = event.args.row;
                // update inputs.
                $("#usu_email").val(row.nm_empresa);
                $("#nm_contato").val(row.nm_contato);
                $("#ds_contato").val(row.ds_contato);
                $("#cidade").val(row.cidade);
                $("#pais").val(row.pais);                */
            });
			
			// Evendo de duplo click da linha da grid para abrir o formulário para ser alterado os dados
            $('#gridPrincipal').on('rowdoubleclick', function (event) {                
                $('#layoutTela').jqxSplitter('expand');
            });

			//============================= Formulário de edição =======================
			// Configura os campos do formulário para dar manutenção ou incluir os dados
            $("#usu_email").jqxInput({
				height: 23, 
				theme: "custom" 
			});
            $("#usu_senha").jqxInput({ 
				height: 23, 
				theme: "custom"
			});
			
            $("#usu_acessoexterno").jqxCheckBox({ 
				width: 120, 
				height: 25, 
				theme: "custom"
			});
			
            $("#salvar").jqxButton({  
				width: 70, 
				height: 23, 
				theme: "custom" 
			});
			
            $("#salvar").click(function () {
                /*var row = $('#gridPrincipal').jqxGrid('getselectedrowindex');
                var rowid = $("#gridPrincipal").jqxGrid('getrowid', row);
                var data = { nm_empresa: $("#nm_empresa").val(), nm_contato: $("#nm_contato").val(), ds_contato: $("#ds_contato").val(), cidade: $("#cidade").val(), pais: $("#pais").val() };
                $("#gridPrincipal").jqxGrid('updaterow', rowid, data);*/
            });            
        });
    </script>
</head>
<body class='default' id="pagina">
    <div id="layoutTela">
        <div>
            <div style="border: none;" id='gridPrincipal'>
             
            </div>
        </div>
        <div id="ContentPanel">
            <form id="Form">
                <table style="margin-top: 20px; width: 100%;">
                     <tr>
                       <td style="text-align:right;">E-mail:</td><td style="text-align:left;"><input type="text" id="usu_email" /></td></tr>
                     <tr>
                       <td style="text-align:right;">Senha:</td><td style="text-align:left;"><input type="password" id="usu_senha" /></td></tr>
                     <tr>
                       <td style="text-align:right;">&nbsp;</td><td style="text-align:left;"><div style="margin-top: 10px;" id="usu_acessoexterno">Acesso Externo</div></td></tr>
                     <tr><td></td><td style="padding-left: 35px; text-align: left;"><input value="Salvar" type="button" id="salvar" /></td></tr>
                </table>
            </form>
            
            <div id="msgWindow">
            </div>
        </div>
    </div>
</body>
</html>
